<template>
    <div class="MainBody">
      <el-container>
    <el-main>
      <el-row class="card-container">
    <el-col
      :span="8"
      v-for="(item, index) in list"
      :key="index"
      class="card-wrapper"
    >
      <div @click="toMainPage(index)" class="card-content">
        <el-card>
          <img src="../../../static/beijing2.jpg" class="image">
          <div style="padding: 14px;">
            <span>{{ item.classname }}</span>
            <div class="bottom clearfix">
          <el-button type="danger" plain class="button" @click.stop="removeClass(item.id)">移除该班级</el-button>
        </div>
          </div>
        </el-card>
      </div>
    </el-col>
  </el-row>
  
    </el-main>
  </el-container>
  
    </div>
  </template>
  
  
  <script>
  import axios from "axios";
  export default {
    data() {
      return {
        currentDate: new Date(),
        list:[],
      };
    },
    methods: {
      toMainPage(title) {
    // 在新标签页中打开当前页面的URL
    let newTab = window.open(('/#/PCClass/' + this.list[title].classname+'/'+this.list[title].id), '_blank');
  
    // 在新标签页中利用路由导航守卫重定向到目标路由
    // newTab.onload = function() {
    //   newTab.location.href = '/#/PCMain/' + this.list[title].classname+'/'+this.list[title].id;
    // };
    },
    removeClass(id) {
      console.log(id);
      this.$confirm('确认移除该班级吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(id);
        this.removeMember(id);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消移除'
        });
      });
    },
    removeMember(id) {
      axios.post("/course/RemoveCourseClass?CourseId="+this.$route.params.id+"&ClassId="+id).then(Response => {
        this.$message({
          message: '移除成功',
          type: 'info'
        });
        location.reload();
      });
    },},
    mounted() {
        this.loading = false;
        axios.post("/course/members?courseId="+this.$route.params.id).then(Response => {
        console.log(Response.data);
        this.list = Response.data.data;
      });
    },
  }
  </script>
  
  <style scoped>
     /* template{
      margin: 0;
      padding: 0;
     } */
    .time {
      font-size: 13px;
      color: #999;
    }
    
    .bottom {
      margin-top: 13px;
      line-height: 12px;
    }
  
    .button {
      padding: 10px 20px;
      float: right;
    }
  
    .image {
      width: 100%;
      display: block;
    }
  
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    
    .clearfix:after {
        clear: both
    }
    .classheader {
      background-color: #424242;
    }
    .classheader span {
      /* height: 60px;
      width: 300px;
      background-color: #f42525; */
      color: #fff;
      font-size: 20px;
      text-align: center;
      line-height: 60px;
    }
    .card-container {
    display: flex;
    flex-wrap: wrap;
  }
  .card-wrapper {
    flex: 0 0 calc(33.333% - 20px); /* 设置每个卡片的宽度为1/3，并添加间距 */
    margin: 10px;
  }
  .card-content {
    height: 100%; /* 保证卡片的高度撑开容器 */
    display: flex;
    flex-direction: column;
  }
  
  </style>
  
  